<template>
  <div class="fr page">
            <div class="sui-pagination clearfix">
              <ul>
                <li class="prev disabled">
                  <a href="#" :disabled="pageNo==1" @click="getPage(pageNo-1)">«上一页</a>
                </li>
                <li v-if="startAndEndNum.start>=2" @click="getPage(1)">
                  <a href="#">1</a>
                </li>
                <li class="dotted" v-if="startAndEndNum.start>2"><span>...</span></li>
                <!-- 点击触发回调,通过自定义事件向父组件传递 page -->
                <li v-for="(page) in startAndEndNum.end" :key="page" :class="{active:pageNo==page}" @click="getPage(page)">
                  <a href="#" v-if="page >= startAndEndNum.start">{{page}}</a>
                </li>
                <li class="dotted" v-if="startAndEndNum.end < totalPage - 1"><span>...</span></li>
                <li v-if="startAndEndNum.end<totalPage" @click="getPage(totalPage)">
                  <a href="#">{{totalPage}}</a>
                </li>
                <li class="next">
                  <a href="#" :disabled="pageNo==totalPage" @click="getPage(pageNo+1)">下一页»</a>
                </li>
              </ul>
              <div><span>共{{totalPage}}页&nbsp;</span></div>
            </div>
          </div>
</template>

<script>
export default {
    name:'Pagination',
    props:['total','pageSize','pageNo','continues'],
    computed: {
        //计算总页码数
        totalPage(){
            return Math.ceil(this.total/this.pageSize)
        },
        //计算开始与结束的页码数,分情况
        startAndEndNum(){
            let {pageNo,continues,totalPage} = this;
            let start = pageNo - parseInt(continues/2);
            let end = pageNo + parseInt(continues/2);

            //判断,开头是否小于1
            if(start <= 1){
                start = 1;
                end = continues
            }

            //判断,结尾是否大于 totalPage
            if(end >= totalPage){
                end = totalPage;
                start = totalPage - continues + 1
            }

            return {start,end}
        }
    },
    methods: {
        getPage(page){
            this.$emit('clickPage',page)
        }
    },
}
</script>

<style scoped lang="less">
.page {
        width: 733px;
        height: 66px;
        overflow: hidden;
        float: right;

        .sui-pagination {
          margin: 18px 0;

          ul {
            margin-left: 0;
            margin-bottom: 0;
            vertical-align: middle;
            width: 500px;
            float: left;

            li {
              line-height: 18px;
              display: inline-block;

              a {
                position: relative;
                float: left;
                line-height: 18px;
                text-decoration: none;
                background-color: #fff;
                border: 1px solid #e0e9ee;
                margin-left: -1px;
                font-size: 14px;
                padding: 9px 18px;
                color: #333;
              }

              &.active {
                a {
                  background-color: #fff;
                  color: #e1251b;
                  border-color: #fff;
                  cursor: default;
                }
              }

              &.prev {
                a {
                  background-color: #fafafa;
                }
              }

              &.disabled {
                a {
                  color: #999;
                  cursor: default;
                }
              }

              &.dotted {
                span {
                  margin-left: -1px;
                  position: relative;
                  float: left;
                  line-height: 18px;
                  text-decoration: none;
                  background-color: #fff;
                  font-size: 14px;
                  border: 0;
                  padding: 9px 18px;
                  color: #333;
                }
              }

              &.next {
                a {
                  background-color: #fafafa;
                }
              }
            }
          }

          div {
            color: #333;
            font-size: 14px;
            float: left;
            width: 200px;
            height: 40px;
            line-height: 40px;
          }
        }
      }
</style>